<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写个人基本信息</title>
    <link rel="stylesheet" type="text/css" href="../css/备选注册界面style.css" >
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" >
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>

</head>
<body>
<div class="rg_left">
    <p>请填写个人信息</p>
</div>
<div class="rg_center">

    <form action="#" method="post">

        <table>

            <tr>
                <!-- 用户名 -->
                <td class="td_left"><label>姓名</label></td>
                <td class="td_right"><input type="text" name="nickname" id="nickname" placeholder="请输入用户名" required="required"></td>
            </tr>
            <tr>
                <!-- 密码  -->
                <td class="td_left"><label>密码</label></td>
                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码" required="required"></td>
            </tr>
            <tr>
                <!-- 性别 -->
                <td class="td_left"><label>性别</label></td>
                <td class="td_right">
                    <select class="sex" name="sex">
                        <option value=" " required="required" disabled selected >请选择性别</option>
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="td_left"><label>请选择身份</label></td>

                <td class="td_right">
                    <select class="sex" name="role">
                        <option value=" " disabled selected>请选择身份</option>
                        <option value="1">求职者</option>
                        <option value="2">招聘者</option>
                        <option value="3">公司</option>
                    </select>
                </td>
            </tr>
            <tr>
                <!-- 出生日期 -->
                <td class="td_left"><label>出生日期</label></td>
                <td class="td_right">
                    <input type="date" name="birthday" id="birthday" required="required" />
                </td>
            </tr>
            <tr>
                <!-- 电话号码 -->
                <td class="td_left"><label>电话号码</label></td>
                <td class="td_right"><input type="tel" required="required" name="phone" id="phone" placeholder="请输入电话号码" oninput = "value=value.replace(/[^\d]/g,'')"></td>
            </tr>
            <tr>
                <td colspan="2" class="td_right"><p id="msg"></p></td>
            </tr>
            <tr>
                <!-- 验证码 -->
                <td class="td_left"><label>验证码</label></td>
                <td class="td_right"><input type="text" name="code" required="required" id="code" placeholder="请输入验证码" class="code">
                <input type="button" id="get_code" value="获取验证码">
                </td>
            </tr>


            <tr>
                <!-- 提交按钮 -->
                <td colspan="2" class="td_right"></br></br>
                    <input type="submit" id="btn_sub" value="注册">
                </td>
            </tr>
        </table>
    </form>
</div>
<div class="rg_right ">
    </br>
    <p>已有账号？<a href="login.html">立即登录</a></p>
</div>

<script>

    $("#get_code").click(function() {

        let count = 60;

        let phone = $('#phone').val();
        let flag = false;
        // 移动 联通  电信
        const regular = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
        let message = "";
        if(phone === " "){
            message = "手机号码不能为空！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else if(phone.length !==11){
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
        }else if(!regular.test(phone)){
            message = "请输入正确的手机号码！";
            $('#msg').text(message);
            $("#msg").show().delay(2000).fadeOut();
/*        }else if(checkPhoneIsExist()){
            message = "该手机号码已经被绑定！";
            console.log(message);
            $('#msg').text(message);
            $("#msg").show().delay(1000).fadeOut();*/
        }else{
            if (count === 60) {
                const countDown = setInterval(() => {
                    if (count === 0) {
                        $("#get_code").attr("value", "重新获取").removeAttr('disabled');
                        $("#get_code").css({
                            background: '#ff9400',
                            color: '#fff',
                        });
                        clearInterval(countDown);
                    } else {
                        $("#get_code").attr('disabled', "true");
                        $("#get_code").css({
                            background: '#d8d8d8',
                            color: '#707070',
                        });
                        $("#get_code").attr("value", "重新获取("+count+")");
                    }
                    count--;
                }, 1000);
            }

        }

    });



</script>
</body>
</html>